<template>
    <view>
        <!-- 用户信息 -->
        <view class="user_info">
            <view class="user_icon">
                <image mode="widthFix" :src="imgDetail.user.avatar"/>
            </view>
            <view class="user_content">
                <view class="user_name">{{imgDetail.user.name}}</view>
                <view class="user_time">{{imgDetail.cntime}}</view>
            </view>
        </view>
        <!-- 高清大图 -->
        <view class="light_bg">
            <swiper-action @swiperAction="handleSwiperAction">
                <image mode="widthFix" :src="imgDetail.thumb"/>
            </swiper-action>
        </view>
        <!-- 点赞 收藏 -->
        <view class="like">
            <view class="rank">
                <text class="iconfont icon-praise">{{imgDetail.rank}}</text>
            </view>
            <view class="collect">
                <text class="iconfont icon-like">收藏</text>
            </view>
        </view>
        <!-- 专辑 -->
        <view class="album" v-if="album.length">
            <view class="album_title">
                相关
            </view>
            <view class="album_info">
                <view class="album_item"
                v-for="item in album"
                :key="item.id">
                    <view class="album_img">
                        <image mode="aspectFill" :src="item.cover"/>
                    </view>
                    <view class="album_right">
                        <view class="album_text">专辑</view>
                        <view class="album_name">{{item.name}}</view>
                        <text class="iconfont icon-you"/>
                    </view>
                </view>
            </view>
        </view>
        <!-- 最热评论 -->
        <view class="comment_hot" v-if="hots.length">
            <view class="comment_title">
                <text class="iconfont icon-hotfill"/>
                <text class="title">最热评论</text>
            </view>
            <view class="comment_list">
                <view class="comment_item"
                v-for="item in hots"
                :key="item.id">
                    <!-- 用户信息 -->
                    <view class="user">
                        <!-- 用户图片 -->
                        <view class="comment_user">
                            <image :src="item.user.avatar" mode="widthFix"></image>
                        </view>
                        <!-- 评论信息 -->
                        <view class="comment_text">
                            <view class="comment_nickname">{{item.user.name}}</view>
                            <view class="comment_time">{{item.cntime}}</view>
                        </view>
                        <!-- 徽章 -->
                        <view class="comment_icon">
                            <image v-for="item2 in item.user.title"
                            :key="item2.icon"
                            :src="item2.icon" mode="aspectFill"></image>
                        </view>
                    </view>
                    <!-- 评论数据 -->
                    <view class="comment_desc">
                        <view class="comment_hot">{{item.content}}</view>
                        <view class="comment_rank">
                            <text class="iconfont icon-praise" />     
                            <text class="number">{{item.size}}</text>
                        </view>
                    </view>
                </view>
            </view>     
        </view>
        <!-- 最新评论 -->
        <view class="comment_hot comment_new" v-if="comment.length">
            <view class="comment_title">
                <text class="iconfont icon-icon1"/>
                <text class="title">最新评论</text>
            </view>
            <view class="comment_list">
                <view class="comment_item"
                v-for="item in comment"
                :key="item.id">
                    <!-- 用户信息 -->
                    <view class="user">
                        <!-- 用户图片 -->
                        <view class="comment_user">
                            <image :src="item.user.avatar" mode="widthFix"></image>
                        </view>
                        <!-- 评论信息 -->
                        <view class="comment_text">
                            <view class="comment_nickname">{{item.user.name}}</view>
                            <view class="comment_time">{{item.cntime}}</view>
                        </view>
                        <!-- 徽章 -->
                        <view class="comment_icon">
                            <image v-for="item2 in item.user.title"
                            :key="item2.icon"
                            :src="item2.icon" mode="aspectFill"></image>
                        </view>
                    </view>
                    <!-- 评论数据 -->
                    <view class="comment_desc">
                        <view class="comment_hot">{{item.content}}</view>
                        <view class="comment_rank">
                            <text class="iconfont icon-praise" />     
                            <text class="number">{{item.size}}</text>
                        </view>
                    </view>
                </view>
            </view>     
        </view>
        <view class="download" @click="handleDownload">
            <view class="download_text">
                下载图片
            </view>
        </view>
    </view>
</template>

<script>
import moment from "moment";
import swiperAction from "@/components/swiperAction";
// 设置为中文
moment.locale("zh-cn");
export default {
    components:{
        swiperAction
    },
    data() {
        return {
            // 图片信息对象，包含用户头像、名字...
            imgDetail:{},
            // 专辑数据
            album:[],
            // 最新评论
            comment:[],
            // 热门评论
            hots:[],
            // 图片索引
            imgIndex:0
        }
    },
    onLoad(){
       // console.log(getApp().globalData); 
       const {imgIndex} = getApp().globalData;
       this.imgIndex = imgIndex;
       this.getData();
    },
    methods:{
        // 当前页面赋值
        getData(){
            const {imgList} = getApp().globalData;
            this.imgDetail = imgList[this.imgIndex];
            //XX年前
            this.imgDetail.cntime = moment(this.imgDetail.atime*1000).fromNow();
            //当前图片id
            // this.imgDetail.id
            this.getComment(this.imgDetail.id);
        },
        getComment(id){
            this.request({
                url:`http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
            })
            .then(result=>{
                // console.log(result);
                this.album = result.res.album;
                this.comment = result.res.comment;
                result.res.hot.forEach(v=>v.cntime = moment(v.atime*1000).fromNow());
                this.hots = result.res.hot;
            })
        },
        // 滑动事件
        handleSwiperAction(e){
            /* 
            1.左滑 imgIndex++
            2.右滑 imgIndex--
            3.判断数组是否越界问题
            4.左滑条件 e.direction === "left"&&this.imgIndex<imgList.length-1
            5.右滑条件e.direction === "right"&&this.imgIndex>0*/
            const {imgList} = getApp().globalData;
            if(e.direction === "left"&&this.imgIndex<imgList.length-1){
                this.imgIndex++;
                this.getData();
            }else if(e.direction === "right"&&this.imgIndex>0){
                this.imgIndex--;
                this.getData();
            }else{
                uni.showToast({
                    title:"没有数据了",
                    icon:"none"
                });
            }
        },
        // 点击下载图片 async await promise
        async handleDownload(){
            // uni.downloadFile
            // uni.saveImageToPhotosAlbum
            await uni.showLoading({
                title:"下载中"
            })
            // 1.将远程文件下载到小程序的内存中 tempFilePath
            const res=await uni.downloadFile({url:this.imgDetail.img});
            const {tempFilePath} =res[1];
            // 2.将小程序内存中的临时文件下载到本地
            const res2=await uni.saveImageToPhotosAlbum({filePath:tempFilePath});
            //3. 提示用户下载成功
            uni.hideLoading();
            await uni.showToast({
                title:"下载成功"
            })

        }
    }
}
</script>

<style lang="scss" scoped>
    .user_info{
        display:flex;
        padding:20rpx;
        .user_icon{
            padding:0 20rpx;
            image{
            width:88rpx;
            border-radius:50%; 
        }
        }
        .user_content{
            .user_name{
                color:#000;
                font-weight:600;
            }
            .user_time{
                padding:10rpx 0;
            }
        }
    }
    .like{
        display:flex;
        height:88rpx;
        border-bottom:6rpx solid #efefef;
        .rank{
            flex:1;
            display:flex;
            justify-content:center;
            align-items:center;
        }
        .collect{
            flex:1;
            display:flex;
            justify-content:center;
            align-items:center;
        }
    }
    .album{
        padding:20rpx;
        border-bottom:6rpx solid #efefef;
        .album_title{
            font-size:30rpx;
            padding:10rpx 0;
        }
        .album_info{      
        .album_item{
            display:flex;
            .album_img{
                flex:1;
                image{
                    width:180rpx;
                    height:180rpx;
                }
            }
            .album_right{
                flex:3;
                font-size:30rpx;
                font-weight:600;
                margin-left:20rpx;
                position:relative;
                .album_text{
                    color:#fff;
                    background:$color;
                    width:100rpx;
                    // height:50rpx;
                    line-height:50rpx;
                    text-align:center;
                    border-radius:8rpx;
                }
                .album_name{
                    color:#000;
                    padding:10rpx 0;
                }
                .icon-you{
                    position:absolute;
                    top:50%;
                    transform:translateY(-50%);
                    right:10%;
                    font-size: 40rpx;
                }
            }
        }
        }
    }
    .comment_hot{
        .comment_title{
            padding:15rpx;
            .icon-hotfill{
                color:red;
                font-size:40rpx
            }
            .title{
                font-size:30rpx;
                font-weight:600;
                margin-left:10rpx;
            }
        }
        .comment_list{
            .comment_item{
                padding:30rpx 20rpx 20rpx;
                border-bottom:6rpx solid #efefef;
                .user{
                    display:flex;
                    .comment_user{
                        width:15%;
                        display:flex;
                        justify-content: center;
                        align-items: center;
                        image{
                            width:90%;
                        }
                    }
                    .comment_text{
                        flex:1;
                        margin-left:1%;
                        .comment_nickname{
                            color:#ccc;
                        }
                        .comment_time{
                            color:#777;
                            padding:10rpx 0;
                        }
                    }
                    .comment_icon{
                        padding-right:10rpx;
                        image{
                            width:40rpx;
                            height:40rpx;
                            display:inline-block;
                        }   
                    }
                }
                .comment_desc{
                    display:flex;
                    padding:24rpx 0;
                    .comment_hot{
                        flex:1;
                        padding-left:16%;
                        font-size:30rpx;
                        font-weight:600;
                    }
                    .comment_rank{
                        text-align:right;
                        padding-right:10rpx;
                    }
                }
            }
        }
    }
    .comment_new{
        .icon-icon1{
            color:aqua;
            font-size:40rpx;
        }
    }
    .download{
        height:120rpx;
        display:flex;
        justify-content: center;
        align-items: center;
        .download_text{
            width:95%;
            height:80%;
            font-size:48rpx;
            color:#fff;
            background:$color;
            display:flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>